<script setup lang="ts">
import { ref, computed } from 'vue';
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// Feature modules for the GuaClass referral system
const systemModules = [
    {
        icon: 'mdi:account-switch',
        titleKey: 'referral.features.clients.title',
        descriptionKey: 'referral.features.clients.desc',
        emoji: '🔁',
        type: 'core'
    },
    {
        icon: 'mdi:cash-minus',
        titleKey: 'referral.features.trail_loss.title',
        descriptionKey: 'referral.features.trail_loss.desc',
        emoji: '💸',
        type: 'core'
    },
    {
        icon: 'mdi:account-cash',
        titleKey: 'referral.features.profitable_clients.title',
        descriptionKey: 'referral.features.profitable_clients.desc',
        emoji: '💰',
        type: 'core'
    },
    {
        icon: 'mdi:bank',
        titleKey: 'referral.features.top_lenders.title',
        descriptionKey: 'referral.features.top_lenders.desc',
        emoji: '🏦',
        type: 'feature'
    },
    {
        icon: 'mdi:chart-line',
        titleKey: 'referral.features.monthly_tracking.title',
        descriptionKey: 'referral.features.monthly_tracking.desc',
        emoji: '📈',
        type: 'feature'
    },
    {
        icon: 'mdi:calendar-check',
        titleKey: 'referral.features.yearly_trail.title',
        descriptionKey: 'referral.features.yearly_trail.desc',
        emoji: '📅',
        type: 'feature'
    }
];

// System statistics
const systemStats = {
    userCount: '500+'
};
</script>
<template>
    <div class="py-12" id="features">
        <v-container>
            <div class="maxWidth">
                <v-row class="justify-center">
                    <v-col cols="12" lg="8" sm="10" data-aos="fade-up" data-aos-duration="500">
                        <div class="d-sm-flex align-center text-center justify-center">
                            <div class="d-flex flex-row-reverse justify-sm-start justify-center ml-sm-0 ml-3">
                                <v-avatar class="ml-n2 avtar-border" size="28">
                                    <img src="@/assets/images/profile/user-3.jpg" height="28" alt="usericon" />
                                </v-avatar>
                                <v-avatar class="ml-n2 avtar-border" size="28">
                                    <img src="@/assets/images/profile/user-2.jpg" height="28" alt="usericon" />
                                </v-avatar>
                                <v-avatar class="ml-n2 avtar-border" size="28">
                                    <img src="@/assets/images/profile/user-1.jpg" height="28" alt="usericon" />
                                </v-avatar>
                            </div>
                            <h6 class="text-h6 ml-2 mt-2 mt-sm-0">{{ systemStats.userCount }}</h6>
                            <h6 class="text-h6 textPrimary ml-2">{{ t('System Users') }}</h6>
                        </div>
                        <h4 class="text-center mt-4  font-weight-bold text-h3" stype="font-size:30px">
                            {{ t('referral.about_title') }}
                        </h4>
                        <p class="text-center text-subtitle-1 mt-4" data-aos="fade-up" data-aos-duration="700">
                            {{ t('referral.about_text') }}
                        </p>
                    </v-col>
                </v-row>

                <div class="mt-sm-16 mt-10">
                    <div class="product-slider position-relative lp_wrapper">
                        <div class="section-title-wrapper text-center">
                            <h3 class="text-h5 font-weight-bold text-primary position-relative d-inline-block"
                                data-aos="fade-up" data-aos-duration="600">
                                {{ t('referral.features_title') }}
                            </h3>
                        </div>
                        <v-row class="mt-8 row-up">
                            <template v-for="(module, index) in systemModules" :key="module.titleKey">
                                <v-col cols="12" md="4" sm="6" v-if="module.type === 'core'" data-aos="fade-up"
                                    :data-aos-delay="150 * index" data-aos-duration="800" data-aos-easing="ease-in-out">
                                    <v-card class="feature-card overflow-hidden position-relative" rounded="lg"
                                        elevation="10">
                                        <div class="text-center pt-8 pb-4">
                                            <v-avatar color="primary" size="60" class="mb-3 elevation-2">
                                                <Icon :icon="module.icon" color="white" width="30" height="30" />
                                            </v-avatar>
                                        </div>
                                        <div class="py-4 px-6">
                                            <div class="text-center">
                                                <h4 class="text-h6 font-weight-bold d-flex align-center justify-center">
                                                    <!-- <span class="emoji-icon mr-2">{{ module.emoji }}</span> -->
                                                    {{ t(module.titleKey) }}
                                                </h4>
                                                <p class="text-body-1 mt-3">{{ t(module.descriptionKey) }}</p>
                                            </div>
                                        </div>
                                    </v-card>
                                </v-col>
                            </template>
                        </v-row>

                        <div class="section-title-wrapper text-center mt-sm-14 mt-10">
                            <h3 class="text-h5 font-weight-bold text-primary position-relative d-inline-block"
                                data-aos="fade-up" data-aos-duration="600">
                                {{ t('referral.why_matters_title') }}
                            </h3>
                        </div>
                        <v-row class="mt-8 row-up">
                            <template v-for="(module, index) in systemModules" :key="module.titleKey">
                                <v-col cols="12" md="4" sm="6" v-if="module.type === 'feature'"
                                    :data-aos="index === 0 ? 'fade-right' : index === 1 ? 'fade-up' : 'fade-left'"
                                    :data-aos-delay="150 * index" data-aos-duration="800" data-aos-easing="ease-in-out">
                                    <v-card class="feature-card overflow-hidden position-relative" rounded="lg"
                                        elevation="10">
                                        <div class="text-center pt-8 pb-4">
                                            <v-avatar color="primary" size="60" class="mb-3 elevation-2">
                                                <Icon :icon="module.icon" color="white" width="30" height="30" />
                                            </v-avatar>
                                        </div>
                                        <div class="py-4 px-6">
                                            <div class="text-center">
                                                <h4 class="text-h6 font-weight-bold d-flex align-center justify-center">
                                                    <!-- <span class="emoji-icon mr-2">{{ module.emoji }}</span> -->
                                                    {{ t(module.titleKey) }}
                                                </h4>
                                                <p class="text-body-1 mt-3">{{ t(module.descriptionKey) }}</p>
                                            </div>
                                        </div>
                                    </v-card>
                                </v-col>
                            </template>
                        </v-row>

                        <v-row class="mt-16 justify-center">
                            <v-col cols="12" md="8" class="text-center" data-aos="fade-up" data-aos-duration="800"
                                data-aos-delay="100">
                                <h3 class="text-h5 font-weight-medium mb-4">{{ t('referral.get_started_text') }}</h3>
                                <p class="text-subtitle-1 mb-5">{{ t('referral.get_started_cta') }}</p>
                                <v-btn color="primary" size="large" href="/auth/login" class="px-8 py-2">
                                    {{ t('referral.login_cta') }}
                                </v-btn>
                            </v-col>
                        </v-row>
                    </div>
                </div>
            </div>
        </v-container>
    </div>
</template>

<style scoped>
.feature-card {
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.09) !important;
}

.v-avatar {
    transition: transform 0.3s ease;
}

.feature-card:hover .v-avatar {
    transform: scale(1.1);
}

.emoji-icon {
    font-size: 1.2rem;
}

.section-title-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.section-title-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: rgba(var(--v-theme-primary), 0.15);
    z-index: 0;
}

.section-title-wrapper h3 {
    padding: 0 20px;
    background-color: var(--v-theme-background, white);
    z-index: 1;
}

.section-title-wrapper h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--v-theme-primary);
}
</style>
